<template>
	<div id="diarys">
	<div class="block">
	  <!-- <div class="radio">
	    排序：
	    <el-radio-group v-model="reverse">
	      <el-radio :label="true">倒序</el-radio>
	      <el-radio :label="false">正序</el-radio>
	    </el-radio-group>
	  </div> -->
	
	  <el-timeline>
	    <el-timeline-item  placement="top"
	      v-for="(diary, index) in diarys"
	      :key="index"
	      :timestamp="diary.createDate">
		  <el-card>
			  <div @click="to('/diary/'+diary.id)">
			  {{diary.subject}}
			  </div>
		  </el-card>
	    </el-timeline-item>
	  </el-timeline>
	</div>
	</div>
</template>

<script>
	import {queryDiaryList} from '@/api/diary.js'
	 export default {
	    data() {
	      return {
			diarys: [],
			pageSize: 5
	      };
	    },
		methods:{
			getDiaryList(pageNo){
				queryDiaryList(pageNo,this.pageSize).then(res => {
					this.diarys = res.data.data;
				})
			},
			to(url){
				//this.$router.push(url);
				window.location.href = url;
			}
		},
		mounted() {
			this.getDiaryList(1);
		},
		beforeCreate() {
			this.$bus.emit("setIdx", 4);
		}
	  };
</script>

<style lang="less">
	.block{
		background-color: #FFFFFF;
		padding: 20px;
		padding-top:40px;
		padding-left: 120px;
		.el-card{
			width: auto;
			display: inline-block;
			cursor: pointer;
		}
	}
</style>
<style scoped="scoped" lang="less">
	#diarys{
		padding: 100px;
		padding-bottom: 40px;
		padding-top: 120px !important;
		.block{
			background-color: #FFFFFF;
			padding: 20px;
			padding-top:40px;
			padding-left: 120px;
			.el-card__body{
				width: auto;
				display: inline-block;
			}
		}
	}
</style>